<nav>
elements, each must
be given a unique
label. The <nav>
element for the
site's
secondary navigation
lacks a label to
identify its
purpose.
<nav>. This results in a <nav>
containing a <nav>.
<nav>
containing
the set of
expandable
menu
widgets.
Remove the aria-label="Site"
attribute
from the <nav>'s
parent <div>
and instead
apply it to
directly to
the <nav>.
<nav>
role from
the
container
for each
expandable
menu.
<div>
<nav
aria-label="Secondary
navigation">
<ul>
...
</ul>
</nav>
</div>
aria-label
attribute when it is
applied to generic
elements such as a <div>
or a <span>. This is noted in
a separate best
practices
assertion.
aria-label
is primarily
designed to provide
an accessible name
to an element. aria-label, aria-labelledby, aria-describedby
are generally
ignored by assistive
technologies when
they are applied to
generic HTML
elements that do not
provide any
meaningful semantic
information i.e. <div>, <span>.
<div>
container
for the set
of
expandable
flyout menus
(My Account,
Billing
&
Payments,
Products
&
Services,
Start, Stop,
& Move,
Outages,
Customer
Service) has
an aria-label="Site"
attribute.
<div>
container
for each
expandable
menu has an aria-label="Submenu"
attribute.
<div>
is a <nav>.
aria-label
attribute from each <div>
container. Instead
apply the aria-label
attribute to its
descendant <nav>.
<div>
</div>
role
and aria-*
is invalid, consult
the
W3C Document
conformance
requirements for
use of ARIA
attributes in
HTML.
<img>
elements, CSS
background images,
rendered dynamically
on <canvas>
elements, SVG path
data, etc.), unless
the particular way
in which text is
visually presented
is essential and/or
cannot be achieved
using regular
technologies like
HTML/SVG/CSS
(including, but not
limited to, the use
of text-shadow, web
fonts, gradient
backgrounds, rounded
corners).
<footer>
has a direct
descendant <footer>
element. It is
inappropriate to
have a footer within
a footer. This
duplicative use of
the footer landmark
may cause confuse
for screen reader
users that make use
of landmark
navigation.
<footer>
or elements with role="contentinfo"
within <footer>.
<footer>
<!-- remove the
nested footer
<footer
role="contentinfo">
...
</footer>
-->
<footer>
<a
href>
container has an aria-label
attribute which
provides the
control's
accessible name.
Each link's
descendant image has
an alt
attribute to also
provide a text
presentation. Given
the aria-label
attribute, the
descendant image can
be considered
decorative; its alt
attribute is
unnecessary.
alt=""
for each badge link.
This will ensure
that the image is
not announced by
assistive
technologies. When
an image is
indicated as
decorative through
the alt=""
attribute,
there's no
possible benefit to
doubling-up with the aria-hidden
attribute. Remove
the unnecessary aria-hidden
attribute from the <img>.
<a
href="https://itunes.apple.com/us/app/duke-energy/id1325217974?mt=8"
target="_blank"
aria-label="Download
on the App
Store"
>
</a>
18pt
/ 24px, or bold and at
least 14pt
/ 18.5px), the contrast
ratio must be at
least 3:1.
lang
attribute on the
most appropriate
container/element,
and set it to the
value of the
appropriate language
code.
lang
attribute to specify
that it is a
different language
than the page's
primary
language.
<html>'s lang
attribute shifts to lang="es-US"
to specify the page
is in (US) Spanish.
The "English"
button
(to shift back to
English version)
lacks a lang="en"
attribute to specify
that it is a
different language
than the page's
primary language,
Spanish. Production
site is out of scope
for this
audit.
lang
attribute must also
be used to identify
chunks of text in a
language that is
different from the
document's
primary
language.
lang="es"
to the button
with name, "Español".
lang="..."
attribute with
appropriate language
code
<html
lang="en">
<body>
...
<button
lang="es">Español</button>
<button>Sign
In</button>
</body>
</html>
lang="en"
to the button
with name, "English".
lang="..."
attribute with
appropriate language
code
<html
lang="es-US">
<body>
...
<button
lang="en">English</button>
<button>Iniciar
sesión</button>
</body>
</html>
<button>
element that
triggers a pop-up
menu has an aria-haspopup="true"
attribute to
indicate to
assistive
technologies that
the button has an
associated
menu.
</button>
aria-label="menu"
attribute. The name
does not indicate
the menu's
primary
purpose.
aria-label
attribute to be more
descriptive of the
button's
purpose e.g. note
which menu is being
opened. "Open
full site
navigation" is
suggested.
</button>
role="dialog"
to the <div>
container for the
navigation menu.
Then set focus to
this element with role="dialog". To achieve this,
make sure that the <div>
element with role="dialog"
can be
programmatically
focused (with the
JavaScript focus()
method) by setting tabindex="-1"
on the
element.
role="dialog"
to indicate
that it is a
dialog.
dialog
to the
element
containing
the side
navigation
menu and the
close
button.
aria-labelledby
reference to
the element
containing
the title
text
(ideally an <h2>) to
provide an
accessible
name. For
dialogs
without a
visible
title, use aria-label
to provide
an
accessible
name. The
side
navigation
does not
currently
have an
element that
functions as
a title.
Therefore,
apply aria-label
to the
element with role="dialog".
role="dialog"
or to the <nav>
within the
dialog.
Apply tabindex="-1"
to the
element
serving as
the focus
target. This
is further
discussed in
a separate
2.4.3
assertion.
aria-hidden="true"
to the
inactive
page content
behind the
dialog. This
hides it
from the
reading
order as
perceived by
assistive
technology,
while
allowing it
to remain
slightly
visible
behind the
dialog. Be
sure to
remove the aria-hidden
attribute
from page
content when
the dialog
is
closed.
<html>
<body>
<div
class="dimmed-overlay"
aria-hidden="true">
<main>
...
</main>
</div>
<div
role="dialog"
aria-label="Navigation
panel">
<nav
aria-label="Main
navigation"
tabindex="-1">
...
</nav>
</div>
</body>
</html>
aria-label
is primarily
designed to provide
an accessible name
to an interactive
element or elements
that act as
landmarks. aria-label, aria-labelledby, aria-describedby
are generally
ignored by assistive
technologies when
they are applied to
generic HTML
elements which do
not have an
interactive role
e.g. button, link,
input.
<div>
container for the
side navigational
panel has aria-label="Side
panel"
attribute
aria-label="Side
panel"
attribute from the <div>
within the <nav>.
role
and aria-*
is invalid, consult
the
W3C Document
conformance
requirements for
use of ARIA
attributes in
HTML.
.content { width:
90%; }
<link
rel="stylesheet"
href="basic.css">
<link
rel="stylesheet"
media="(max-width:320px)"
href="small.css">
<link
rel="stylesheet"
media="(max-width:600px)"
href="medium.css">
<link
rel="stylesheet"
media="(min-width:601px)"
href="large.css">
<iframe>
with the label
"YouTube video
player". This
title does not let
users know which
video is in the <iframe>. Screen reader
users do not have
enough information
to know whether or
not they should
enter the <iframe>
content.
title
for <iframe>
elements when they
contain content for
a user.
<iframe>
elements that do not
display content to
users (e.g. it is
used for
programmatic
reasons), take the
following steps: Use
CSS display:none
or the hidden
attribute
<iframe>
is not intended to
be read.
iframe.hidden
{
display:none;
}
aria-hidden="true'
to hide the <svg>
from assistive
technologies. Also
add focusable="false"
to the <svg>
element to prevent
unnecessary tab
stops.
<a
href="https://desitecoredev92-cd.azureedge.net/_/media/pdfs/our-company/ash-management/212492-asheville-3q21-monitoring-results.pdf?la=en&rev=009ac748bbac49149c7676ac52d343f7">
...
</svg>
</a>
<tbody>
element is
improperly
nested
within the <table>
element
(after the <tfoot>
element).
<table>
element (or
an element
with a table
role for
ARIA based
tables).
Note that
the grid
role is
reserved for
a widget
that uses
most of the
same roles
within it
(identified
below) but
triggers a
different
interaction
mode for
screen
reader
users.
presentation
or none
role.
<caption>
element to
label the
table. For
ARIA based
tables, use
an ARIA
labeling
method such
as aria-labelledby.
<tr>
element for
each row, or
the row
role for
rows in ARIA
based
tables.
<th>
element for
row and
column
headers. To
indicate
what
dimension
the header
applies to,
the scope=col
and scope=row
attributes
for row
headers are
implied by
user agents
assistive
technology
so are
generally
not needed.
For ARIA
based
tables, use
the columnheader
and rowheader
roles.
<td>
element for
each cell
(or an
element with
a cell
role for
ARIA based
tables, gridcell
if using the grid
role).
<table>
element, also
ensure:
role="status"
on an
element
within the <caption>
element.
<caption>
element with status
update when table is
sorted
<table>
<caption>News
and Resources
<span
role="status">sorted
by title
ascending</span></caption>
...
</table>
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
<th>
elements.
Uses
headings
instead.
<caption>
element to
label the
table. For
ARIA based
tables, use
an ARIA
labeling
method such
as aria-labelledby.
<tr>
element for
each row, or
the row
role for
rows in ARIA
based
tables.
<th>
element for
row and
column
headers. To
indicate
what
dimension
the header
applies to,
the scope=col
and scope=row
attributes
for row
headers are
implied by
user agents
assistive
technology
so are
generally
not needed.
For ARIA
based
tables, use
the columnheader
and rowheader
roles.
<td>
element for
each cell
(or an
element with
a cell
role for
ARIA based
tables, gridcell
if using the grid
role).
text-transform
to transform the
text to
uppercase.
<table>
<caption>Contact
Information</caption>
<tr>
<td></td>
<th>Name</th>
<th>Phone#</th>
<th>Fax#</th>
<th>City</th>
</tr>
<tr>
<td>1.</td>
<th>Joel
Garner</th>
<td>412-212-5421</td>
<td>412-212-5400</td>
<td>Pittsburgh</td>
</tr>
<tr>
<td>2.</td>
<th>Clive
Lloyd</th>
<td>410-306-1420</td>
<td>410-306-5400</td>
<td>Baltimore</td>
</tr>
<tr>
<td>3.</td>
<th>Gordon
Greenidge</th>
<td>281-564-6720</td>
<td>281-511-6600</td>
<td>Houston</td>
</tr>
</table>
</div>
</div>
</div>
</div>
aria-pressed
attribute to each
video tile button.
Toggle the button to
reflect whether that
video is
selected.
aria-pressed
attribute.
<button
aria-pressed="true"
aria
label="Parental
leave -
Maria">
<img
src="..."
alt="">
</button>
aria-live="polite", role="status", aria-atomic="true"
to a visually hidden <span>. When a video is
selected, update
this live region to
describe/summarize
the change in page
i.e. "Parental
leave - Maria video
selected".
<span
aria-live="polite"
role="status">Parental
leave - Maria video
selected</span>
alt
attribute. The alt
attribute indicates
that the text
describing its image
i.g. "Parental
Leave - Chris
Bethany Mosteller
image". This
information is
unnecessary; the
text alternative is
meant to describe
the control's
purpose. Superfluous
information in the
text alternative
increase the page
noise and make it
harder to understand
a control's
purpose.
alt
attribute. The text
alternative could be
further improved by
noting that it is a
video.
<button>
</button>
<select>
element has a label
that is visually
hidden until the
user selects a
value. The purpose
of the control may
not be clear to
users.
<h3>). This can be
confusing for users,
especially assistive
technology users who
navigate the page by
heading.
alt="image"
attribute. This
extra "page
noise" can
cause confusion for
screen reader users.
Screen reader users
will wonder whether
the image is
actually informative
and its information
is not adequately
announced to
them.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
title
attribute with a
long,
incomprehensible
string sitecore:item:InternalLinkTreeview_AC99B8D34494492B9AFA2BD36DF3DDC6, that resembles a
file name, as its
value. When focus is
set to the link,
screen readers
announce this title
attribute as part of
the link's
accessible
name/description.
title
attribute.
<a
href="/our-company/about-us/awards">
...
</a>
role="tab"
has has an aria-label
attribute which
provides the
control's
accessible name.
Each tab's
descendant image has
an alt
attribute which has
a redundant text
alternative e.g. alt="icon". Given the aria-label
attribute on the
image's
functional
container, the
element with role="tab", the descendant
image can be
considered
decorative; its alt
attribute is
unnecessary.
alt=""
for the image within
each tab. This will
ensure that the
image is not
announced by
assistive
technologies. When
an image is
indicated as
decorative through
the alt=""
attribute,
there's no
possible benefit to
doubling-up with the aria-hidden
attribute. Remove
the unnecessary aria-hidden
attribute from the <img>.
<button
aria-controls="panel-site-requirements"
aria-selected="false"
role="tab"
tabindex="-1"
type="button">
<img alt="">
<span>Site
Requirements</span>
</button>
alt="chart"
attribute.
alt="patterned
background for duke
Energy grant
notification
copy"
attribute.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
hidden
attribute or CSS display:none, or add text and
ensure it is
available to all
users.
<p>... Please
view our <a
href="http://www.prizelabs.com/termsandconditions/"
target="_blank">complete
terms and
conditions</a>.
....</p>
alt="image"
attribute. This can
cause confusion for
screen reader
users.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
aria-expanded
attribute to
indicate whether the
content it controls
is expanded or
collapsed. When the aria-expanded
attribute is
toggled, it triggers
an announcement to
assistive
technology. This is
positive behavior.
The label also
switches between
"Show
More" and
"Show
less". As a
rule of thumb, one
should not change an
ARIA property and
the label together.
If the label
changes, the button
has already changed
state in a sense.
However, a change in
label alone does not
trigger an
announcement to
assistive
technology.
<p>These
products or services
are not part of the
regulated utility
services offered by
Duke Energy
Carolinas
("DEC")
and ...
</p>
<img>
is the sole element
within the button to
close the feedback
aside. The image is
missing a text
alternative. As a
result, the control,
has no text
representation that
could provide an
accessible
name.
<div>
but has no
text.
<img>
elements that need
to contribute
content to the
accessible name of a
link or button,
apply an alt
attribute with a
value briefly
describing the link
target/button action
and including any
text displayed in
the image.
alt
attribute:
<button>
</button>
aria-label
attribute can be
applied to the
functional
container. Given the aria-label
attribute provides
an accessible name,
the descendant image
must be indicated as
decorative.
aria-label
attribute:
</button>
em-based
container
and font
sizes.
Setting the
size of
containers
using em
units means
that the
container
will adapt
in size to
reflect any
changes in
text size
within those
containers.
In terms of
text
resizing, em
units are
more robust
than px
units,
particularly
when using
Internet
Explorer,
which
won't
resize text
that has
been set
using
absolute
measurements.
<div>
which has an
inappropriate role="main"
attribute. This
element with role="main"
which contains most
of the widget's
content. A page can
only have one <main>
landmark.
<main>
<main>
landmark and instead
use a generic <div>
as a
container.
<iframe>
lacking a
label.
title
for <iframe>
elements when they
contain content for
a user such as the
feedback
panel.
<iframe>
elementdoes not
display content to
users (e.g. it is
used for
programmatic
reasons), take the
following steps: Use
CSS display:none
or the hidden
attribute
<iframe>
is not intended to
be read.
iframe.hidden {
display:none;
}
display: none
or visibility:
hidden
to the widget's
container.
<div>
element. Besides
lacking an
accessible name, the
control also lacks
the appropriate
button role. This is
discussed in a
separate 4.1.2
assertion.
<div>. It lacks
accessible name,
role, and state
information. There
are numerous steps
which must be
undertaken besides
providing an
accessible
name.
<button>
or apply role="button"
alt
attribute to the
descendant <img>. Alternatively,
when an image is the
sole element within
an interactive
element, i.e. a
button or a link,
apply aria-label
attribute to the
functional
container.
<div>
and does not
convey the
appropriate
semantic
information.
<span>.
<button>
instead of coercing
a generic <div>
or <span>
into a custom
button. Native HTML
comes with
accessibility built
into the element and
does not require
functionality to be
rebuilt.
role="button"
on the
generic <div>
or <span>.
tabindex="0".
button.
<div>
with a CSS-generated
background image.
The image does not
have a text
alternative. The
control is a generic <div>
element and does not
expose a button
role. Screen readers
mostly ignore the
control. The control
has a tabindex="0"
attribute. When the
control receives
focus, screen
readers either
announce
"clickable"
or make no
announcement at
all.
<button>. If this
is not
possible,
apply role="button"
to the
control.
ARIA role
attributes
can be used
to provide
semantics to
generic
elements.
aria-label="Feedback
form"
to the
control.
Visually
hidden text
within the
button could
also be
used.
aria-expanded
attribute to
the control
to reflect
whether the
content it
controls is
expanded or
collapsed.
</button>
<img>
elements, CSS
background images,
rendered dynamically
on <canvas>
elements, SVG path
data, etc.), unless
the particular way
in which text is
visually presented
is essential and/or
cannot be achieved
using regular
technologies like
HTML/SVG/CSS
(including, but not
limited to, the use
of text-shadow, web
fonts, gradient
backgrounds, rounded
corners).
<div>
element. Besides
lacking an
accessible name, the
control also lacks
the appropriate
button role and
state information to
indicate whether the
content it controls
is expanded or
collapsed. This is
discussed in a
separate 4.1.2
assertion.
<div>. It lacks
accessible name,
role, and state
information. There
are numerous steps
which must be
undertaken besides
providing an
accessible
name.
<button>
or apply role="button"
aria-expanded
attribute to
the control
and toggle
its value to
reflect
whether the
content it
controls is
expanded or
collapsed.
aria-label
attribute to the
functional
container.
<span>Feedback</span>
<div>. The
control to
reveal the
disclosure
content is
not exposed
as a
button.
aria-expanded
aria-label
to the
functional
container.
<button>
or at least
apply role="button"
to the
control
aria-expanded
attribute to
the control
and toggle
its value to
reflect
whether the
content it
controls is
collapsed or
expanded.
<button
aria-expanded="false">
<span>Feedback</span>
</button>
aria-hidden="true"
is applied to the
feedback
aside's
container. However,
ARIA only changes
the announcement to
screen readers and
does not affect the
functionality for
any other user
group. ARIA does not
prevent an element
from receiving
keyboard
focus.
aria-hidden="true"
attribute on the
feedback aside
container, when it
is collapsed and
apply tabindex="-1"
to each focusable
element within the
container.
display: none
or visibility:
hidden
to the widget's
container.
aria-hidden="true"
to the widget's
container and tabindex="-1"
attribute to all
focusable elements
within the widget,
when it is visually
hidden.
<svg>
image without a text
alternative. Blind
and low vision users
will not have the
same immediate
understanding that
the form has
submitted
successfully.
<title>
element to provide a
text alternative
that's
appropriate for the
context. To ensure
support in assistive
technologies,
provide role="img"
and aria-labelledby
attributes in the <svg>
element. To ensure
that <svg>
elements do not
receive keyboard
focus, add focusable="false".
...
</svg>
<dl>)for this
data.
<dl>
<dt>If
contact by phone is
your preference,
what time of day is
best?</dt>
<dd>Daytime</dd>
</dl>
<ul>
<li>Duke
Energy
<b>Carolinas</b>
- <a
href="..."
target="_blank">Gas
Line Repair
Program</a>
(<a
href="..."
target="_blank">En
Español</a>)</li>
<li>Duke
Energy
<b>Indiana</b>
- <a
href="..."
title="DE
Indiana Gas Line
Repair Program"
target="_blank">Gas
Line Repair
Program</a>
(<a
href="..."
target="_blank">En
Español</a>)</li>
<li>Duke
Energy
<b>Progress</b>
- <a
href="..."
title="DE
Progress Gas Line
Repair Program"
target="_blank">Gas
Line Repair
Program</a>
(<a
href="..."
target="_blank">En
Español</a></li>
</ul>
<fieldset>
element with an
empty <legend>
element. This is
unnecessary and
could cause
confusion. Remove
these
elements.
placeholder
attribute.
placeholder
attribute will
generally be exposed
to assistive
technologies, so is
announced by screen
readers. But for
other user groups,
relying on
placeholder text on
its own for
instructions is a
problematic
approach. Issues
include:
<textarea>
element. Associate
this instruction
text to the <textarea>
by using the aria-describedby
attribute.
id
value.
<textarea>
element an aria-describedby
attribute
with a value
that matches
the value of
the id
in the
previous
step.
<label ...
for="Comments">Comments</label>
(required)
or an
asterisk _
in the label
of the
field
aria-hidden="true"
attribute
to
ensure
that
screen
readers
do
not
announce
the
ambiguous
"star"
text
when
the
associated
field
receives
focus.
aria-required
attribute
to
the <input>
and
set
its
value
to true.
This
will
ensure
that
the <input>
is
exposed
to
assistive
technologies
as a
required
field,
and
thus
screen
readers
will
announce
this
fact
to
their
users
(e.g.
by
announcing
"required"
after
announcing
the
label
and
any
contents
within
the
field).
<label
for="employeeName">Employee
<span
aria-hidden="true">(required)</span></label>
<form>
<p>Fields with
an asterisk _ are
required</p>
...
<label
for="employeeName">Employee
*</label>
...
</form>
aria-invalid="true"
on form fields that
contain invalid
data. This will
ensure that the
field is exposed to
assistive
technologies as an
invalid field, and
screen readers will
announce this, for
example, by
announcing
"invalid
entry" as part
of the field
description. Once
the field is valid,
remove the aria-invalid
attribute or set it
to false.
<label
for="address">Address</label>
aria-describedby
to associate the
error message with
the form field. Once
the field is valid,
remove the error
message.
aria-describedby
to point to an error
message
<label
for="email">Email</label>
autocomplete
attribute
...
<label
for="passwordId">Password</label>
aria-describedby
attribute to the
form control which
points to an id
on the error message
element. When the
form is submitted,
programmatically
shift keyboard focus
to the first field
in error.
<label
for="address">Address</label>
<input
type="text"
id="address"
aria-invalid="true"
aria-describedby="address-error">
<span
id="address-error">Error:
please enter a valid
address</span>
<svg>
image without a text
alternative. Blind
and low vision users
will not know that
this is a completed
step.
<title>
element to provide a
text alternative
that's
appropriate for the
context. To ensure
support in assistive
technologies,
provide role="img"
and aria-labelledby
attributes in the <svg>
element.
<title>
element, role="img", and the aria-labelledby
attribute
(Simplified
code)
...
</svg>
.content { width:
90%; }
<link
rel="stylesheet"
href="basic.css">
<link
rel="stylesheet"
media="(max-width:320px)"
href="small.css">
<link
rel="stylesheet"
media="(max-width:600px)"
href="medium.css">
<link
rel="stylesheet"
media="(min-width:601px)"
href="large.css">
id
attribute values.
Specifically, the
check marks for
complete steps all
contain <path>
elements with the
same id
attribute value: "check_svg__a".
id="..."
attribute values are
unique for the
page.
<ol>
in place of the
unordered list, <ul>.
<li
class="...">
...
<div
class="..."
style="...">Applicant
Information</div>
</li>
...
<div
class="...">
Applicant
Information
<span
class="visually-hidden">Current
Step</span>
</div>
tabindex="-1"
to the <div>
that contains this
text. This will
ensure that it can
receive keyboard
focus across
browsers.
<div
tabindex="-1"
class="...">
Schedule
<span
class="visually-hidden">Current
Step</span>
</div>
.content { width:
90%; }
<link
rel="stylesheet"
href="basic.css">
<link
rel="stylesheet"
media="(max-width:320px)"
href="small.css">
<link
rel="stylesheet"
media="(max-width:600px)"
href="medium.css">
<link
rel="stylesheet"
media="(min-width:601px)"
href="large.css">
grid
features
rather than
one. The
date picker
is also
missing
dialog
semantics.
aria-label
attribute.
This is
misleading
and can
result in
screen
reader users
assuming
they cannot
choose a
future
year.
grid
calendar
feature.
aria-label.
<input>
rather than opening
the date picker
might input date
information
incorrectly. For
example, someone
might expect the
date format to be
dd/mm/yyyy. This
could mean the
difference between
making an
appointment for
January 12th, 2023
(01/12/2023) and
December 1st, 2021
(12/01/2023).
<input>
element using the aria-describedby
attribute.
<input
aria-describedby="date-format1">
<span
id="date-format1">Date
format:
mm/dd/yyyy</span>
<label>
itself.
<div>
elements within the <button>
element.
id="..."
attribute values are
unique for the
page.
.content { width:
90%; }
<link
rel="stylesheet"
href="basic.css">
<link
rel="stylesheet"
media="(max-width:320px)"
href="small.css">
<link
rel="stylesheet"
media="(max-width:600px)"
href="medium.css">
<link
rel="stylesheet"
media="(min-width:601px)"
href="large.css">
<h1>
to <h6>) to
semantically
identify
headings.
<h1>
to <h6>
elements
cannot be
used, role="heading"
and aria-level
attributes
can be used.
The value of
the aria-level
attribute
must be a
number
ranging from
1 to 6,
indicating
the
heading's
level.
<button>
element named with
the aria-label
attribute. Using
this aria-label
overwrites the
entire content of
the alert. Screen
reader users will
not have access to
any of the text
within the alert.
Instead, screen
readers will
announce the
presence of a
"toggle"
button. Clicking the
button does not
provide access to
the rest of the
content.
aria-label
attribute.
aria-label
on the
button. If
you remove
the aria-label, screen
readers will
announce the
full text of
the button
without
truncation.
There are
two problems
with this.
First, it
creates a
very long
name for the
button.
Second,
expanding
the button
does not
reveal more
content for
screen
reader
users. This
can be
confusing.
Screen
reader users
might assume
the button
is
broken.
alt
value of the
image from
"icon
alert"
to
"alert".
<h2>
<button
aria-expanded="false"
aria-controls="alert1"
id="alert1btn">
<img
src="..."
alt="alert">
System maintenance
September 25th and
26th
</button>
</h2>
<div
id="alert1"
role="region"
aria-labelledby="alert1btn">From
11 p.m., Saturday,
Sept.
5...</div>
<h4>
heading.
<h4>
elements we would
recommend wrapping
the text in a <p>
tag and using CSS to
create the required
look and feel.
<h4
class="text-xs
font-bold
uppercase">customer
assistance
programs</h4>
<p
class="flex-1
mt-8 text-xl
text-gray-dark
">Help
people in need with
your monthly Duke
Bill</p>
aria-invalid="true"
on form fields that
contain invalid
data. This will
ensure that the
field is exposed to
assistive
technologies as an
invalid field, and
screen readers will
announce this, for
example, by
announcing
"invalid
entry" as part
of the field
description. Once
the field is valid,
remove the aria-invalid
attribute or set it
to false.
aria-invalid
<label
for="address">Address</label>
aria-describedby
to associate the
error message with
the form field. Once
the field is valid,
remove the error
message.
aria-describedby
to point to an error
message
<label
for="email">Email</label>
autocomplete
attribute
role="dialog"
attribute.
aria-labelledby
reference to
the element
containing
the title
text
(usually the <h2>), e.g.
"Search"
to provide
an
accessible
name.
aria-label
to provide
an
accessible
name for the
dialog.
dialog
to the
search panel
container.
aria-hidden="true"
to the
inactive
page content
behind the
dialog. This
hides it
from the
reading
order as
perceived by
assistive
technology,
while
allowing it
to remain
slightly
visible
behind the
dialog. Be
sure to
remove the aria-hidden
attribute
from page
content when
the dialog
is
closed.
<nav>
serves as the
container for the
search side panel.
This is
inappropriate. A
navigation region
should only contain
navigation
controls.
<nav>
as a container. The
container for the
search results panel
must have role="dialog". This is discussed
at length in other
assertions for this
component.
<nav>
serves as the
container for the
search side panel.
This is
inappropriate. A
navigation region
should only contain
navigation
controls.
<nav>
as a container. The
container for the
search results panel
must have role="dialog". This is discussed
at length in other
assertions for this
component.
aria-hidden
attribute must be used to hide the
image completely from assistive
technologies. Using aria-hidden means
the image will remain visible on the
page.
focusable="false"
to the SVG.
aria-hidden
attribute
...
</svg>
em-based container and font
sizes.
Setting the size of containers
using em
units means that the container
will adapt in size to reflect
any changes in text size within
those containers. In terms of
text resizing, em
units are more robust than px
units, particularly when using
Internet Explorer, which
won't resize text that has
been set using absolute
measurements.
aria-hidden="true"
on the container element for any non
dialog content when the dialog is
open
<body>
<div`` ``aria-hidden="true">
<main>
...
</main>
</div>\
<div role="dialog"
class="visible"`` ``aria-labelledby="dialog-title">
</div>
</body>
role="dialog"
to the container.
tabindex="-1"
to the element with role="dialog".
aria-labelledby
attribute to the dialog
container and reference the
top-level heading "Select
your location". This
requires adding an id
to the heading.
tabindex
of 0. When the user has focus set to the
last focusable element and presses
TAB, set focus to the first focusable
element in the dialog. Similarly, when
focus is set to the first focusable
element in the dialog and the user
presses SHIFT+TAB, set focus to the
last focusable element in the
dialog.
autocomplete
attributes
role="dialog"
attribute.
aria-labelledby
reference to the element
containing the title text
(usually the <h2>) to provide an accessible
name. In this case, "Sign
in" serves as a title and
could be used. Be sure to
identify this text as a
heading.
aria-label
to provide an accessible name
for the dialog.
aria-describedby
to reference the element
containing the text.
dialog
to the containing element.
<nav>
serves as the container for the sign
in panel. This is inappropriate. A
navigation region should only contain
navigation controls.
<nav>
as a container. The container for the
search results panel must have role="dialog". This is discussed at length in
other assertions for this
component.
dialog
role.
aria-labelledby
reference to
the element
containing
the title
text (the <h2>) to
provide an
accessible
name.
role="dialog"
to the
containing
element.
aria-hidden="true"
to the
inactive
page content
behind the
dialog. This
hides it
from the
reading
order as
perceived by
assistive
technology,
while
allowing it
to remain
slightly
visible
behind the
dialog. Be
sure to
remove the aria-hidden
attribute
from page
content when
the dialog
is
closed.
</div>
dialog
role.
aria-labelledby
reference to
the element
containing
the title
text (the <h2>) to
provide an
accessible
name.
aria-describedby
to reference
the element
containing
the
text.
dialog
OR alertdialog
to the
containing
element.
aria-hidden="true"
to the
inactive
page content
behind the
dialog. This
hides it
from the
reading
order as
perceived by
assistive
technology,
while
allowing it
to remain
slightly
visible
behind the
dialog. Be
sure to
remove the aria-hidden
attribute
from page
content when
the dialog
is
closed.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
aria-label
attribute. Bear in
mind that not all
automated
translation tools
will translate the
text in the aria-label
attribute.
aria-label
to provide further
context
aria-label, otherwise this
would fail
SC 2.5.3 Label
in Name
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
alt
attribute contains a
short description.
This can cause
confusion for screen
reader users.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
:focus
style which is more
visually evident
(such as an explicit
dark background, a
bold border, or
similar).
:focus { outline:
2px dotted black;
/
example values only / }
:hover, an initial step
can be to
"double-up"
the CSS selector to
also apply to :focus. In the case of
the links within Top
Tasks, it is
suggested to use the
controls' hover
state - the control
bounces up when the
mouse hovers it.
:hover
style to also apply
on :focus
alt="". This will ensure
that the image is
not announced by
assistive
technologies. One of
the links,
"Request a
light repair,"
also includes a title
which repeats the
link text. Removing
it will make the
link announcement
less verbose.
.content { width:
90%; }
<link
rel="stylesheet"
href="basic.css">
<link
rel="stylesheet"
media="(max-width:320px)"
href="small.css">
<link
rel="stylesheet"
media="(max-width:600px)"
href="medium.css">
<link
rel="stylesheet"
media="(min-width:601px)"
href="large.css">
<a>), but it should be
a button (<button>).
<button>, <input
type="button"
...>
or <input
type="submit"
...>
elements (depending
on their specific
purpose) for
controls acting as
buttons, as
they're
understood correctly
by assistive
technologies.
<button>
element, ensure that
at least the
appropriate
programmatic role="button"
is exposed to
assistive
technologies. In
addition, ensure
that the control can
be operated like a
regular <button>
and can be activated
using both ENTER and
SPACE keys (this
will potentially
require a small
change to the
current JavaScript
behavior).
role="button"
and the
presence of aria-hidden.
aria-labelledby
reference to
the element
containing
the title
text
(ideally an <h2>) to
provide an
accessible
name.
aria-label
to provide
an
accessible
name.
dialog
to the
containing
element.
aria-hidden="true"
to the
inactive
page content
behind the
dialog. This
hides it
from the
reading
order as
perceived by
assistive
technology,
while
allowing it
to remain
slightly
visible
behind the
dialog. Be
sure to
remove the aria-hidden
attribute
from page
content when
the dialog
is
closed.
role="button"
from all
elements
that are not
buttons.
aria-hidden
from the
dialog.
<iframe>
elements that
contain videos are
titled "YouTube
video player."
This doesn't
give screen reader
users any
information about
which video is
within the <iframe>.
title
for <iframe>
elements when they
contain content for
a user.
<a
href="...">Loan
sale announcement
(PDF,
11KB)</a>
.content { width:
90%; }
<link
rel="stylesheet"
href="basic.css">
<link
rel="stylesheet"
media="(max-width:320px)"
href="small.css">
<link
rel="stylesheet"
media="(max-width:600px)"
href="medium.css">
<link
rel="stylesheet"
media="(min-width:601px)"
href="large.css">
<ul>, and <li>
elements.
<ul>
<li>Read
<a
href="..."
target="_blank">2021
Terms and
Conditions</a></li>
<li>Read
about <a
href="..."
target="_blank">2021
NC Solar Rebate
Program</a></li>
<li><a
href="..."
target="_blank">2021
Solar Rebate Rider
SRR</a></li>
<li><a
href="...">Learn
more about solar
rebates for your
business</a></li>
</ul>
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
.content { width:
90%; }
<link
rel="stylesheet"
href="basic.css">
<link
rel="stylesheet"
media="(max-width:320px)"
href="small.css">
<link
rel="stylesheet"
media="(max-width:600px)"
href="medium.css">
<link
rel="stylesheet"
media="(min-width:601px)"
href="large.css">
<svg>
image(s) is not
described
adequately. Blind
and low vision users
will not be able to
understand the
image(s).
<svg>
image requires a
more detailed plain
text description,
you may use the SVG
<desc>
element in
conjunction with the
aria-describedby
attribute.
<desc>
element and the aria-describedby
attribute
<svg
version="1.1"
role="img"
aria-labelledby="logo-title"
<title
id="logo-title">HTML5
Logo</title>
<polygon
points="107.644..."
fill="#E44D26"/>
...
</svg>
<title>
element to provide a
text alternative
that's
appropriate for the
context. To ensure
support in assistive
technologies,
provide role="img"
and aria-labelledby
attributes in the <svg>
element.
<desc>
element provides an
accessible
description for the
SVG image. It is a
way of providing
more detailed
information about
the image than the <title>
element allows on
its own.
aria-describedby
attribute
re-enforces the
connection between
the <svg>
and <desc>
elements. It ensures
the descriptive
information is
available, even in
browsers where
accessibility
support for SVG is
limited.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
.content {
width: 90%; }
<link
rel="stylesheet"
href="basic.css">
<link
rel="stylesheet"
media="(max-width:320px)"
href="small.css">
<link
rel="stylesheet"
media="(max-width:600px)"
href="medium.css">
<link
rel="stylesheet"
media="(min-width:601px)"
href="large.css">
focusin
event
handler for
the entire
page.
window.scrollBy
method to
scroll it
into
view.
<h1>
to <h6>) to
semantically
identify
headings
(after
adding the
alternative
text, per
another
assertion).
<h1>
to <h6>
elements
cannot be
used, role="heading"
and aria-level
attributes
can be used.
The value of
the aria-level
attribute
must be a
number
ranging from
1 to 6,
indicating
the
heading's
level.
group
or region
role. In
addition,
add aria-roledescription="carousel"
to the
container.
aria-labelledby
(if there
already is a
visible
heading or
label), or aria-label
(if there is
no visible
label).
role="group"
and aria-roledescription="slide".
<span>
within the button to close the email
sign up widget.
<button
aria-label="close">
<span>@ Sign Up
Now</span>
</button>
<h1>
to <h6>) to semantically identify
headings (after adding the
alternative text, per another
assertion).
<h1>
to <h6>
elements cannot be used, role="heading"
and aria-level
attributes can be used. The
value of the aria-level
attribute must be a number
ranging from 1 to 6, indicating
the heading's level.
<button>.
<h2>@ Sign Up
Now</h2>
<button`` ``aria-label="close @ Sign Up
Now">
<span>@ Sign Up
Now</span>
</button>
aria-hidden="true"
on the container element for any non
dialog content when the dialog is
open
<body>
<div`` ``aria-hidden="true">
<main>
...
</main>
</div>
<div role="dialog"
class="visible"`` ``aria-labelledby="dialog-title">
<h2`` ``id="dialog-title">@ Sign Up Now</h2>
</div>
</body>
role="dialog"
to the container.
tabindex="-1"
to the element with role="dialog".
aria-labelledby
attribute to the dialog
container and reference the
top-level heading "Select
your location". This
requires adding an id
to the heading.
href), form input elements, buttons, and
any element with a tabindex
of 0. When the user has focus set to the
last focusable element and presses
TAB, set focus to the first focusable
element in the dialog. Similarly, when
focus is set to the first focusable
element in the dialog and the user
presses Shift+TAB, set focus to the
last focusable element in the
dialog.
<input>
for an email address and the <select>
for U.S. state lack accessible names.
Each form control has an associated <label>
but the <label>
is hidden using visibility: hidden. As a result, screen readers cannot
derive an accessible name from the <label>. For example, when focus is set to
the <select>, NVDA announces the currently
selected option and the form's <label>, "State", which would be
an appropriate accessible name, is not
announced.
visibility: hidden
from each form control's <label>. Instead, make each <label>
into an always visible label.
<label
for="form-email">Email
Address</label>
<input type="email"
value
id="form-email">
autocomplete
attributes
autocomplete
attribute
<label
for="form-email">Email
Address</label>
...
<label
for="form-state">State</label>
</select>
aria-describedby
attribute to each form control and
reference the id
for the form control's error
message. This requires adding an id
to each error message.
<label for="form-email"
class="form-label">Email
Address</label>
<label>. They have text, "Email
Address" and "State",
that could provide an appropriate
accessible name for the form control.
However, each <label>
is hidden using display: none, and so, some screen readers do not
announce the <label>. For example, NVDA announces the
placeholder text, "Email
address" for the <input>
and the currently selected option for
the <select>. This lack of an accessible name is
discussed in a separate 4.1.2
assertion.
<label>
always visible.
role="dialog"
attribute.
aria-labelledby
reference to the element
containing the title text
(usually the <h2>) to provide an accessible
name. In this case, "@ Sign
Up Now" serves as a title
and could be used. Be sure to
identify this text as a
heading.
aria-label
to provide an accessible name
for the dialog.
aria-describedby
to reference the element
containing the text.
dialog
OR alertdialog
to the containing element.
aria-hidden
attribute which toggles to reflect
whether the widget is displayed or
hidden. When the widget is displayed,
the container has an aria-hidden="false"
attribute which could be problematic
for screen reader users.
aria-hidden
attribute as a Boolean attribute
similar to the checked or required
attribute, where the presence of the
attribute alone, regardless of its
value, is evaluated as true. In other words, browsers will
interpret aria-hidden="<any
phrase>"
as true. As a a result, the widget could be
hidden to screen reader users when it
is displayed.
aria-hidden
to display:none):
aria-hidden="true"
where content/elements need to
be hidden to assistive
technology
aria-hidden
attribute where content/elements
are to be made available to
assistive technology, rather
than set it as aria-hidden="false"
aria-hidden
attribute must be
used to hide the
image completely
from assistive
technologies. Using
aria-hidden means
the image will
remain visible on
the page.
aria-hidden
attribute
<button>
...
</svg>
<span>North
Carolina</span>
</button>
<fieldset>
element. Next,
provide the group a
label using the <legend>
element. Note that a <legend>
element must appear
as the first child
element of the <fieldset>.
<fieldset>
and <legend>
elements, an ARIA role="group"
may be specified on
the containing
element, and an aria-labelledby
may be used to
reference the
group's visible
label. If a grouping
does not have a
visible label, then
add one.
aria-labelledby
<p>Our site
is customized based
on your location.
We'll remember
your selection for
future
visits.</p>
<li><button>North
Carolina</button></li>
<li><button>South
Carolina</button></li>
<li><button>Ohio</button></li>
<li><button>Kentucky</button></li>
<li><button>Indiana</button></li>
<li><button>Florida</button></li>
</ul>
role="dialog"
to the container. To
accommodate legacy
browsers, apply tabindex="-1"
to the element with role="dialog". Also apply aria-labelledby
attribute to the
dialog container and
reference the
top-level heading
"Select your
location". This
requires adding an id
to the
heading.
dialog
to the
containing
element.
aria-labelledby
reference to
the element
containing
the title
text
(ideally an <h2>) to
provide an
accessible
name. The
heading
"Select
your
location"
can be used
as the
visual
title. This
requires
adding an id
to the
heading. If
it is not
possible to
use the
heading,
then an aria-label
attribute
can be
applied to
the element
with role="dialog"
to provide
an
accessible
name.
aria-hidden="true"
to the
inactive
page content
behind the
dialog. This
hides it
from the
reading
order as
perceived by
assistive
technology,
while
allowing it
to remain
slightly
visible
behind the
dialog. Be
sure to
remove the aria-hidden
attribute
from page
content when
the dialog
is
closed.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
alt="". This will ensure
that the image is
not announced by
assistive
technologies.
aria-hidden
attribute must be
used to hide the
image completely
from assistive
technologies. Using
aria-hidden means
the image will
remain visible on
the page.
focusable="false"
to the SVG.
aria-hidden
attribute
...
</svg>
aria-live="polite", aria-atomic="true", and role="status"
to the container for
this text.
<span>Search
Results</span>
<span>1 - 10
of 849
results</span>
</div>
aria-live="polite", aria-atomic="true", and role="status"
to the
container
for this
text.
<span
aria-live="polite"
role="status"
aria-atomic="true">39
Results
Found</span>